<template>
  <view class="index">
    <div class="tip">请完善您的信息，我们将通过邮件为您发送下载地址。</div>
    <div class="from">
      <div class="item" v-for="item, index in data" :key="index" :id="item.type + index">
        <template v-if="item.type == 'singleSelect'">
          <div class="select" @click="doClickSelect(item)">
            <div class="label">{{ objForm.profession == "" ? '行业' : objForm.profession }}</div>
            <IconFont name="right"></IconFont>
          </div>
        </template>
        <template v-else>
          <div class="label">{{ item.label }}</div>
          <input :value="objForm[item.label]" @focus="doFocus" @blur="onblur" />
        </template>
      </div>
    </div>
    <nut-popup v-model:visible="showPicker" position="bottom" custom-class="customClass">
      <nut-picker :columns="columns" title="" @confirm="confirm"></nut-picker>
    </nut-popup>
    <div class="buttonBar">
      <div></div>
      <nut-button color="#3b8746" shape="square" @click="submit" style="margin: 0 20px 0 0;">确认提交</nut-button>
    </div>
    <nut-toast msg="请填写完成后提交" v-model:visible="showToast" />
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { IconFont } from '@nutui/icons-vue-taro';

// 单个模块激活样式
let selectActive = ref(false)

// 数据初始化
let objForm = reactive({
  name: '',
  phone: '',
  email: '',
  company: '',
  profession: ''
})
// 输入框焦点事件
function doFocus(item: any) {
  item.currentTarget.parentElement.style.borderBottomColor = '#589355';
  item.currentTarget.previousElementSibling.style.color = '#589355';
  item.currentTarget.parentElement.style.backgroundColor = '#d8d8d8'
}
// 输入框失去焦点事件
function onblur(item: any) {
  item.currentTarget.parentElement.style.borderBottomColor = '#a8a8a8';
  item.currentTarget.previousElementSibling.style.color = '#888';
  item.currentTarget.parentElement.style.backgroundColor = '#fff'
}

// 点击selec触发事件
function doClickSelect(item: any) {
  selectActive.value = true;
  showPicker.value = true;
  let newColumns: any = []
  for (let i in item.options) {
    newColumns.push({ text: item.options[i], value: item.options[i] })
  }
  columns.value = newColumns;
  console.log(columns);
}

// 是否打开选择器
let showPicker = ref(false)

// 选择器参数数组
let columns = ref([]);

// 选择器组件确认事件
const confirm = ({ selectedValue, selectedOptions }) => {
  selectActive.value = false;
  showPicker.value = false;
  objForm.profession = selectedOptions.map((val: any) => val.text).join(',')
};

// 数据
const mockData = [{ "type": "text", "label": "姓名" }, { "type": "tel", "label": "⼿机号" }, { "type": "email", "label": "邮箱" }, { "type": "singleSelect", "label": "", "options": ["⼯业4.0", "航空航天"] }]
let data = ref(mockData)

let showToast = ref(false)
function submit() {
  showToast.value = true;
}
</script>

<style lang="scss" scoped>
.index {
  padding: .7em;
  background-color: #f1f6f5;
  min-height: 100vh;

  .tip {
    color: #888;
    font-size: .7em;
    letter-spacing: .1rem;
    margin-bottom: .7em;
  }

}

.item {
  background-color: #fff;
  padding: .7em;
  margin-top: 1em;
  border-radius: 5px;
  border-bottom-style: solid;
  border-bottom-color: #a8a8a8;

  .label {
    font-size: .7rem;
    color: #888;
    margin-bottom: .5rem;
  }
}


.activeItem {
  background-color: #fff;
  padding: .7em;
  margin-top: 1em;
  border-radius: 5px;
  border-bottom-style: solid;
  border-bottom-color: #589355;

  .activeLabel {
    font-size: .7rem;
    color: #589355;
    margin-bottom: .5rem;
  }
}

.select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #888;
}

.activeSelect {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom-color: #589355;
}

.buttonBar {
  background-color: #fff;
  width: 100vw;
  padding: 1em 0;
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  z-index: 1;
  display: flex;
  justify-content: space-between;
}
</style>
